{% extends 'base.html' %}
{% load static %}
{% block title %}
    任务详情
{% endblock %}
{% block css %}

{% endblock %}
{% block page-title %}
    任务详情
{% endblock %}
{% block page-content %}
    <div class="row">
        <div class="col-lg-5">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">查看任务详情</h3>
                </div>
                <div class="panel-body">
                    <div class="table-responsive">
                        <table class="table table-striped">
                            <tbody>
                            <tr>
                                <td class="text-right">任务概述</td>
                                <td>{{ object.name }}</td>
                            </tr>
                            <tr>
                                <td class="text-right">目标机器</td>
                                <td>{{ object.dest_hosts }}</td>
                            </tr>
                            <tr>
                                <td class="text-right">提交时间</td>
                                <td>{{ object.created_at }}</td>
                            </tr>
                            <tr>
                                <td class="text-right">状态</td>
                                <td><label
                                        class="label label-status
                                        {% if object.status == 0 %}
                                        label-default
                                        {% elif object.status == 1 %}
                                        label-success
                                        {% elif object.status == 2 %}
                                        label-danger
                                        {% endif %}">{{ object.get_status_display }}
                                </label>
                                </td>
                            </tr>
                            <tr>
                                <td class="text-right">动作</td>
                                <td class="task-action">
                                    {% if object.status == 2 %}
                                        <a href="{% url 'task:task_list' %}" class="btn btn-primary btn-xs">任务列表</a>
                                    {% elif object.status == 1 %}
                                        <a href="{% url 'task:task_list' %}" class="btn btn-primary btn-xs">任务列表</a>
                                        <a href="javascript:void(0)"
                                           class="btn btn-warning btn-xs btn-result">查看结果</a>
                                    {% elif object.status == 0 %}
                                        <a href="{% url 'task:task_cancel' object.id %}" class="btn btn-danger btn-xs">取消任务</a>
                                        <button class="btn btn-info btn-xs btn-publish">发布任务</button>
                                    {% endif %}
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-7">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">配置文件(或Playbook)的内容</h3>
                </div>
                <div class="panel-body" style="height: 555px">
                    <pre style="height:500px;overflow: scroll">{{ object.content|safe }}</pre>
                </div>
            </div>
        </div>
    </div>

    <!--执行结果模态窗-->
    <div class="modal inmodal fade" id="task_result" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span
                            aria-hidden="true">&times;</span><span
                            class="sr-only">Close</span></button>
                    <h4 class="modal-title"></h4>
                </div>
                <div class="modal-body">
                    <pre id="content"></pre>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-info" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block js %}
    <script>
        // 点击发布按钮
        // 1、将当前任务提交到后端执行， 2、执行成功之后，将执行结果通过莫泰窗展示来
        $('.btn-publish').click(function () {
            $.ajax({
                type: "POST",
                url: "{% url 'task:task_publish' object.id %}",
                data: {},
                success: function (result) {
                    console.log(result)
                    if (result['code'] === 0) {
                        var modal = $('#task_result');
                        modal.modal("show");
                        get_task_result(modal, '{{ object.id }}');
                    }
                }
            })
        });

        // 获取任务的执行结果
        function get_task_result(modal, task_id) {
            $.ajax({
                type: "GET",
                url: "/task/get_task_result/?task_id=" + task_id,
                success: function (result) {
                    modal.find('.modal-body #content').text(result['data']);
                }
            })
        }

        //点击查看结果按钮
        $('.task-action').on('click', '.btn-result', function () {
            var modal = $('#task_result');
            modal.modal("show");
            get_task_result(modal, '{{ object.id }}');
        });
    </script>
{% endblock %}
